<template>
  <div class="innerTransfer boxSize">
    <div class="search-content">
      <el-form :model="formInline" ref="formInline" :rules="rules" label-width="120px">
        <el-form-item label="收款账号" prop="payeeAcNo">
          <el-input v-model="formInline.payeeAcNo" suffix-icon="el-icon-bank-card"></el-input>
        </el-form-item>
        <el-form-item label="收款人名称" prop="payeeName">
          <el-input v-model="formInline.payeeName"></el-input>
        </el-form-item>
        <el-form-item label="付款账号" prop="payerAcNo">
          <el-popover
            placement="bottom"
            popper-class="account_popper"
            width="200"
            trigger="manual"
            v-model="visible">
            <li v-for="(item, index) in acNAmouns" :key="index" @click="onPayerChange(item)">{{item.accNo}}</li>
            <el-input slot="reference" v-model="formInline.payerAcNo">
              <i class="el-icon-bank-card" slot="suffix" @click="handleIconClick"></i>
            </el-input>
          </el-popover>
        </el-form-item>
        <el-form-item label="付款人名称" prop="payerName">
          <el-input v-model="formInline.payerName"></el-input>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input v-model="formInline.amount"></el-input>
        </el-form-item>
        <el-form-item label="用途">
          <el-input v-model="formInline.use"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formInline.remark"></el-input>
        </el-form-item>
        <el-form-item label="手续费" prop="serviceCharge">
          <el-input v-model="formInline.serviceCharge"></el-input>
        </el-form-item>
        <el-form-item label="是否添加收款人名册" label-width="180px">
          <el-switch v-model="formInline.isAddRegister"></el-switch>
        </el-form-item>
        <el-form-item label="是否为指定收款账户转账" label-width="180px">
          <el-switch v-model="formInline.isAssignAccount"></el-switch>
        </el-form-item>
        <el-form-item label="是否预约" label-width="180px">
          <el-switch v-model="formInline.isAppointment"></el-switch>
        </el-form-item>
        <el-form-item v-show="formInline.isAppointment" label="预约日期">
          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.appointmentDate"
                          style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-col :span="24">
          <el-button type="primary" @click="submitForm('formInline')">提交</el-button>
        </el-col>
      </el-form>
    </div>
  </div>
</template>

<script>
import { accInfoQuery, territoryInnerTransfer } from '@/libs/api'

export default {
  data () {
    return {
      formInline: {
        payeeAcNo: '0434520000100021',
        payeeName: '中文名4301372165',
        isAppointment: 0,
        isAddRegister: 0,
        use: '企业行内转账',
        serviceCharge: 0
      },
      form: {},
      acNAmouns: [],
      visible: false,
      rules: {
        payeeAcNo: [{ required: true, message: '请输入收款账号', trigger: 'blur' }],
        payeeName: [{ required: true, message: '请输入收款人名称', trigger: 'blur' }],
        payerAcNo: [{ required: true, message: '请输入付款账号', trigger: 'blur' }],
        payerName: [{ required: true, message: '请输入付款人名称', trigger: 'blur' }],
        amount: [{ required: true, message: '请输入转账金额', trigger: 'blur' }],
        use: [{ required: true, message: '请输入转账用途', trigger: 'blur' }],
        serviceCharge: [{ required: true, message: '请输入转账金额', trigger: 'blur' }]
      }
    }
  },
  methods: {
    onPayerChange (item) {
      console.log(item)
      this.visible = false
      // this.formInline.payerAcNo = item.accNo
      // this.formInline.payerName = item.name
      this.$set(this.formInline, 'payerAcNo', item.accNo);
      this.$set(this.formInline, 'payerName', item.name);
      this.$refs.formInline.validateField(['payerAcNo', 'payerName']);
    },
    handleIconClick () {
      if (this.acNAmouns && this.acNAmouns.length) {
        this.visible = true
        return
      }
      const params = {
        cstNo: '', // 客户
        hostNo: '043101008690', // 核心
        operType: '00',
        cryDir: '',
        type: 1
      }
      accInfoQuery(params).then(res => {
        this.acNAmouns = res.accList;
        this.visible = true;
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          territoryInnerTransfer({
            ...this.formInline,
            cstNo: '1745210879',
            hostNo: '04301706609',
            operNo: '174521087902',
            operName: '姓名174521087902',
            isAssignAccount: 1,
            isAddRegister: 1,
            menuId: 99
          }).then((res) => {
            if (res.retCode === 'IOP0000000') {
              this.$notify({
                title: res.message,
                dangerouslyUseHTMLString: true,
                message: `交易流水号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; \n${res.globleSeqNo}`,
                type: 'success'
              });
            }
          })
        } else {
          this.$notify.error({
            message: '请核对信息'
          })
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang = 'less'>
.innerTransfer {
  width: 70%;
  height: 100%;
  padding-left: 30%;
  .search-content {
    margin: 8px 16px;
    text-align: left;
    .innerTransfer-content {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .common {
        width: 30%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10px;
        padding-left: 5px;
        span {
          display: inline-block;
          flex: 1;
        }
        .el-input {
          width: 60%;
          .el-input__inner {
            height: 30px;
            line-height: 30px;
          }
        }
      }
      .serach-btn {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
      }
    }
  }
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
}
</style>
